<template>
    <div class="box">
        <div class="title">{{ title }}</div>
        <div class="disc" v-if="disc !== 'undefined'">
            <bNumber v-for="item, index in disc" :number="item" :key="index" time="1.8s"></bNumber>
            {{ unit }}
        </div>
        <div v-else class="disc"></div>
    </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue';
import { watch } from "vue";
import bNumber from "../widget/b_number.vue";

interface prop {
    title: string
    // disc?: string | number
    disc?: string
    unit: string
}
const props = defineProps<prop>()
// const _dis = ref('')

// const getRenderArr = (string: string, dot: number, arr: string[]) => {
//     const number = Number(string)
//     const sts = string.split('.')
//     const length2 = sts[1]?.length || 0
//     let a = 1
//     for (let index = 0; index < length2; index++) {
//         a = a * 10
//     }
//     arr.push(string)
//     const nu = String(Math.floor(number * a / dot) / a).padStart(string.length, '0')
//     if (Number(nu) > dot) return getRenderArr(nu, dot, arr)
//     else return arr
// }
// const render = () => {
//     if (!props.disc) {
//         _dis.value = ''
//         return
//     }
//     const diss = getRenderArr(String(props.disc), 2, [])
//     const timer = setInterval(() => {
//         const d = diss.pop()
//         if (d === undefined) {
//             clearInterval(timer)
//             return
//         } else {
//             _dis.value = d
//         }
//     }, 100);
// }
// render()
// defineExpose({ render })
</script>

<style scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: #dfdfdf20;
}

.title {
    font-size: 1.2em;
}

.disc {
    display: flex;
    align-items: center;
    font-size: 1.6em;
    color: #f9e433;
    height: 1.6em;
}
</style>